function Pagination(ele, options) {
    this.ele = ele;
    this.options = options || {};
    this.default = {
        pageInfo: {
            pageNum: 10,
            pageSize: 10,
            total: 1000,
            totalPage: 100
        },
        textInfo: {
            first: "first",
            prev: "prev",
            list: "",
            next: "next",
            last: "last"
        }
    };
    this.change = this.options.change || function() {};
    this.list = null;
    //  this.change = options.change || function() {};
    this.init();
}
Pagination.prototype.init = function() {
    this.parameter();
    this.event_();
    this.setStyle();
}
Pagination.prototype.parameter = function() {
    if (this.options.pageInfo) {
        for (let attr in this.options.pageInfo) {
            this.default.pageInfo[attr] = this.options.pageInfo[attr];
        }
    }
    if (this.options.textInfo) {
        for (let attr in this.options.textInfo) {
            this.default.textInfo[attr] = this.options.textInfo[attr];
        }
    }
}

function setCss(ele, options) {
    for (let attr in options) {
        ele.style[attr] = options[attr];
    }
}
Pagination.prototype.setStyle = function() {

    this.ele.innerHTML = "";
    setCss(this.ele, {
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    })
    this.createElement1();
    this.createList();
    this.disable();
    this.createBtn();
    this.change(this.default.pageInfo.pageNum);
    // this.change(this.default.pageInfo.pageNum);

}

Pagination.prototype.createElement1 = function() {

    for (let attr in this.default.textInfo) {
        const div1 = document.createElement("div");
        div1.className = attr;
        if (attr === "list") {
            this.list = div1;
            setCss(div1, {
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
            })
        } else {
            div1.innerHTML = this.default.textInfo[attr];
            setCss(div1, {
                border: "1px solid #333",
                padding: "0 5px",
                margin: "0 5px"
            })
        }
        this.ele.appendChild(div1);
    }
}
Pagination.prototype.creatP = function(i) {
    let p = document.createElement('p');
    p.innerHTML = i;
    setCss(p, {
        border: '1px solid #333',
        padding: "0 5px",
        margin: "0 5px"
    })
    if (i === this.default.pageInfo.pageNum) {
        setCss(p, {
            backgroundColor: 'orangered'
        })
    }
    return p;
}
Pagination.prototype.createList = function() {
    let pageNum = this.default.pageInfo.pageNum;
    let totalPage = this.default.pageInfo.totalPage;
    if (totalPage <= 9) {
        for (let i = 1; i <= totalPage; i++) {
            let p = this.creatP(i)
            this.list.appendChild(p);
        }
    } else {
        if (pageNum < 5) {
            for (let i = 1; i <= 5; i++) {
                this.list.appendChild(this.creatP(i));
            }
            const span = document.createElement("span");
            span.innerHTML = "...";
            this.list.appendChild(span);
            for (let i = totalPage - 1; i <= totalPage; i++) {
                this.list.appendChild(this.creatP(i));
            }

        } else if (pageNum === 5) {
            for (let i = 0; i <= 7; i++) {
                this.list.appendChild(this.creatP(i))
            }
            const span = document.createElement("span")
            span.innerHTML = "...";
            this.list.appendChild(span);
            for (let i = totalPage - 1; i <= totalPage; i++) {
                this.list.appendChild(this.creatP(i))
            }
        } else if (pageNum > 5 && pageNum < totalPage - 4) {
            for (let i = 1; i <= 2; i++) {
                this.list.appendChild(this.creatP(i));
            }
            const span = document.createElement("span");
            span.innerHTML = "...";
            this.list.appendChild(span);
            for (let i = pageNum - 2; i <= pageNum + 2; i++) {
                this.list.appendChild(this.creatP(i));
            }
            const span1 = document.createElement("span");
            span1.innerHTML = "...";
            this.list.appendChild(span1);

        } else if (pageNum === totalPage - 4) {
            for (let i = 1; i <= 2; i++) {
                this.list.appendChild(this.creatP(i))
            }
            const span = document.createElement("span");
            span.innerHTML = "...";
            this.list.appendChild(span);
            for (let i = totalPage - 6; i <= totalPage; i++) {
                this.list.appendChild(this.creatP(i));
            }
        } else if (pageNum > totalPage - 4) {
            for (let i = 1; i <= 2; i++) {
                this.list.appendChild(this.creatP(i));
            }
            const span = document.createElement("span");
            span.innerHTML = "...";
            this.list.appendChild(span);
            for (let i = totalPage - 4; i <= totalPage; i++) {
                this.list.appendChild(this.creatP(i));
            }
        }
    }
}
Pagination.prototype.disable = function() {
    if (this.default.pageInfo.pageNum === 1) {
        setCss(this.ele.children[0], {
            backgroundColor: "#ccc"
        })
        setCss(this.ele.children[1], {
            backgroundColor: "#ccc"
        })
    }
    if (this.default.pageInfo.pageNum === this.default.pageInfo.totalPage) {
        setCss(this.ele.children[3], {
            backgroundColor: "#ccc"
        })
        setCss(this.ele.children[4], {
            backgroundColor: "#CCC"
        })
    }
}
Pagination.prototype.createBtn = function() {
    const input = document.createElement("input");
    const btn = document.createElement("button");
    input.type = "text";
    setCss(input, {
        width: "50px",
        height: "20px",
        textAlign: "center"
    })
    input.value = this.default.pageInfo.pageNum;
    btn.innerHTML = "Go";
    setCss(btn, {
        width: "30px",
        height: "22px"
    })
    this.ele.appendChild(input);
    this.ele.appendChild(btn);
}
Pagination.prototype.event_ = function(e) {
    e = e || window.event;
    //给大盒子添加点击事件，把大盒子中的子元素的时间全部委托给大盒子处理
    this.ele.addEventListener("click", e => {
        let target_ = e.target;
        if (target_.className === "first" && this.default.pageInfo.pageNum !== 1) {
            this.default.pageInfo.pageNum = 1;
            this.setStyle();
        }
        if (target_.className === "prev" && this.default.pageInfo.pageNum !== 1) {
            this.default.pageInfo.pageNum--;
            this.setStyle();
            console.log(111);
        }
        if (target_.className === 'next' && this.default.pageInfo.pageNum !== this.default.pageInfo.totalPage) {

            this.default.pageInfo.pageNum++
                this.setStyle()
        }
        if (target_.className ===
            "last" && this.default.pageInfo.pageNum !== this.default.pageInfo.totalPage) {
            this.default.pageInfo.pageNum = this.default.pageInfo.totalPage;
            this.setStyle();
        }
        if (target_.nodeName === "P" && this.default.pageInfo.pageNum !== Number(target_.innerHTML)) {
            this.default.pageInfo.pageNum = Number(target_.innerHTML);
            this.setStyle();
        }
        if (target_.nodeName === "BUTTON" && this.default.pageInfo.pageNum != target_.previousElementSibling.value) {
            if (target_.previousElementSibling.value < 1) {
                this.default.pageInfo.pageNum = 1;
            } else if (target_.previousElementSibling.value > this.default.pageInfo.totalPage) {
                this.default.pageInfo.pageNum = this.default.pageInfo.totalPage;
            } else {
                this.default.pageInfo.pageNum =
                    Number(target_.previousElementSibling.value);
            }
            this.setStyle();
        }
    })
}